<template>
  <div class="mc-container">
    <!-- 题目区-->
    <!--    <div class="title" :class=" !isShow && !isMouseout  ? 'title-mouse' : ''"  :id="value.id"-->
    <div class="title" :class=" !isShow && !isMouseout  ? 'title-mouse' : ''"
         @mouseout="onmouseout"
         @mouseover="onmouseover"
         @click="isShowWin()">
      <div class="content">
        <span style="color: #ff0000; margin: 3px 1.8px 0 0; font-size: 17px" v-show="isTitleRequired">*</span>
        <span style="margin-left: 9px;" v-show="!isTitleRequired"></span>
        <div class="title-con">
          <span>{{ toPic + '.' }}</span>
          <p v-if="topicTitle === ''" style="color: #444444; margin-right: 2px">标题</p>
          <p v-else v-html="topicTitle" style="color: #444444; margin-right: 2px"></p>
        </div>
      </div>
      <!--    提示  -->
      <span class="hint" v-html="showModal ? topicHintItem : topicHint"></span>
      <!--      选项-->
      <div>{{ '标题: topicTitle = ' + topicTitle }}</div>
      <div>{{ '此题是否必答: isTitleRequired = ' + isTitleRequired }}</div>
      <div>{{ '提示信息: topicHint = ' + topicHint }}</div>
      <div>{{ '选项最后几项不随机: lastNoRandomNumber = ' + lastNoRandomNumber }}</div>
      <div>{{ '是否展开组件: isShow = ' + isShow }}</div>
      <div>{{ '展示所有题必答: isRequired = ' + isRequired }}</div>
      <div>{{ '选项数组: toPicList[] = ' }}</div>
      <div v-for="item in toPicList" :key="'in--' + item.id">{{ item }}</div>

      <div class="form-check" v-for="item in toPicList" :key="item.id">
        <!--        <input class="form-check-input" :checked="item.isDefault" name="toPic" type="radio"
                       @click="handleClick(item.id)"
                       :id="'toPic' + item.id">
                <label class="form-check-label" :for="'toPic' + item.id">
                  {{ item.topicTitle === '' ? item.placeholder : item.topicTitle }}
                </label>-->
        <span class="left-title">
          <input class="form-check-input custom-radio" :checked="item.isDefault" name="toPic" type="radio"
                 @click="handleClick(item.id)" :id="'toPic' + item.id">
          <label class="form-check-label"> {{ item.topicTitle === '' ? item.placeholder : item.topicTitle }} </label>
          <!--        选项后的填空-->
          <input v-if="item.isGap" type="text" disabled class="gap">
          <!--        填空后的*号-->
          <span style="color: #ff0000; font-size: 14px; " v-show="item.isGap && item.isGapRequired">*</span>
        </span>
        <!--       选项后的说明 (显示方式)-->
        <p v-if="item.isDisplayMode" id="explain-p" v-html="item.explain === '' ? '' : item.explain"></p>
        <div v-if="!item.isDisplayMode">
          <a href="javascript:" @click="isPopUpWin = true" class="form-check-a" :style="item.explain === '' ? 'display: none' : ''">
            {{ item.explain === '' ? '' : item.popUpWinExplainMsg === '' ? '了解详情' : item.popUpWinExplainMsg }}</a>
          <div class="div-top2" v-if="isPopUpWin" @click.stop=''>
            <div id="pop-up-w-explain"
                 @mousedown="startDragging"
                 @mouseup="stopDragging"
                 @mouseleave="stopDragging"
                 @mousemove="onMouseMove"
                 :style="{ left: left + 'px', top: top + 'px' }">
              <div class="header" style="cursor: move;"></div>
              <div class="fixed-con">
                <div class="content" style="cursor: auto">
                  <p style="color: #999999; font-weight: 400" v-html="item.explain === '' ? '' : item.explain"></p>
                </div>
                <span class="span-icon">
                <a-icon type="close" @click="isPopUpWin = false"/>
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      当获取到鼠标焦点时 显示-->
      <div class="activity" v-show="!isShow && !isMouseout">
        <div class="left">
          <a href="javascript:" class="link-normal" style="text-decoration:underline;"
             @click.stop="add_topic">在此题后插入新题</a>
        </div>
        <div class="right">
          <ul>
            <li>
              <a href="javascript:void(0);" @click="isShow = false">
                <span class="bx">
                      <a-icon type="edit" theme="filled" style="color:#FF9600"/>
                </span>
                <!--                <i style="color:#FF9600" class="bi bi-brush-fill"></i>-->
                <span class="vam">编辑</span>
              </a>
            </li>
            <li class="li_copy" @click.stop="copy_click">
              <a href="javascript:void(0);">
                <span class="bx">
                   <a-icon theme="filled" type="copy"/>
                </span>
                <!--                <i class="bi bi-union"></i>-->
                <span class="vam">复制</span>
              </a>
            </li>
            <li class="li_del" style="height:23px;" @mouseleave="showBatchMove1 = false">
              <a href="javascript:" @mouseenter="showBatchMove1 = true" @click.stop="delete_click">
                <span class="bx">
                   <a-icon theme="filled" type="delete"/>
                </span>
                <!--                <i class="bi bi-trash-fill"></i>-->
                <span class="vam">删除</span>
              </a>
              <a href="javascript:" v-if="showBatchMove1" @click.stop="batch_delete_click">批量删除</a>
            </li>
            <li class="li_up" style="height:23px;" @mouseleave="showBatchMove2 = false">
              <a href="javascript:void(0);" @mouseenter="showBatchMove2 = true" @click.stop="move_up_click">
                <span class="bx">
                   <a-icon type="arrow-up"/>
                </span>
                <!--                <i class="bi bi-arrow-up"></i>-->
                <span class="vam">上移</span>
              </a>
              <a href="javascript:" v-if="showBatchMove2" @click.stop="batch_move_up_click">批量移动</a>
            </li>
            <li class="li_down" style="height:23px;" @mouseleave="showBatchMove3 = false">
              <a href="javascript:void(0);" @mouseenter="showBatchMove3 = true" @click.stop="down_click">
                <span class="bx">
                    <a-icon type="arrow-down"/>
                </span>
                <!--                <i class="bi bi-arrow-down"></i>-->
                <span class="vam">下移</span>
              </a>
              <a href="javascript:" v-if="showBatchMove3" @click.stop="batch_down_click">批量移动</a>
            </li>
            <li class="li_first">
              <a href="javascript:void(0);" title="将此题移动到第一题" @click.stop="first_click">
                <span class="bx">
                      <a-icon type="vertical-align-top"/>
                </span>
                <!--                <i class="bi bi-arrow-bar-up"></i>-->
                <span class="vam">最前</span>
              </a>
            </li>
            <li class="li_last">
              <a href="javascript:void(0);" title="将此题移动到最后一题" @click.stop="last_click">
                <span class="bx">
                  <a-icon type="vertical-align-bottom"/>
                </span>
                <!--                <i class="bi bi-arrow-bar-down"></i>-->
                <span class="vam">最后</span>
              </a>
            </li>
            <div style="clear:both;"></div>
          </ul>
        </div>
      </div>
    </div>
    <!--      富文本编辑区-->
    <div v-if="isShow" class="edit">
      <!-- 富文本-->
      <div class="con" style="position: relative;">
        <VueEditor v-model.trim="topicTitle" placeholder="请输入标题内容"></VueEditor>
      </div>
      <!--      切换富文本组件 是否必答 提示-->
      <div class="change-module">
        <div class="left">
          <div class="custom-control custom-checkbox my-1 mr-sm-2">
            <input type="checkbox" class="custom-control-input custom-checkbox3" @change="isRequired = true"
                   :checked='isTitleRequired === true'
                   @click=" isTitleRequired = isTitleRequired === true? false : true "
                   id="customControlInline">
            <label class="custom-control-label" for="customControlInline">必答</label>
            <span v-if="isRequired === true">将所有题目设为:
            <a href="javascript:void(0)" @click="toggleCheckbox(true)">必答</a>
            <a href="javascript:void(0)" @click="toggleCheckbox(false)">非必答</a>
          </span>
          </div>
          <div class="explain">
            <a href="javascript:void(0)" @click="showModalChange()">填写提示</a>
          </div>
        </div>
        <div class="right">
          <span>
            <select class="random-select" v-model="lastNoRandomNumber">
              <option value="-1">选项不随机</option>
              <option value="0">全部项随机</option>

              <!--              <option v-for="(item, index) in toPicList" :key="item.id" :value="index + ''"
                                    :class="index === (toPicList.length - 1) ? 'hide' : ''">{{
                                index === 0 ? '全部项随机' : '最后' + index + '项不随机'
                              }}</option>-->
            </select>
            <a href="javascript:" style="display:none">复制</a>
          </span>
          <!--            <span class="mode">
                          <select class="random-select">
                            <option value="1">竖向排列</option>
                            <option value="0">下拉菜单</option>
                            <optgroup label="横向排列">
                              <option value="2">每行2列</option>
                              <option value="3">每行3列</option>
                              <option value="4">每行4列</option>
                              <option value="5">每行5列</option>
                              <option value="6">每行6列</option>
                              <option value="7">每行7列</option>
                              <option value="8">每行8列</option>
                              <option value="9">每行9列</option>
                              <option value="10">每行10列</option>
                              <option value="11">每行11列</option>
                              <option value="12">每行12列</option>
                              <option value="15">每行15列</option>
                              <option value="20">每行20列</option>
                              <option value="30">每行30列</option>
                            </optgroup>
                          </select>
                        </span>-->
        </div>
      </div>
      <!--      编辑题目区-->
      <div class="topic-list">
        <table class="table table-borderless">
          <tbody>
          <tr>
            <td>
              <span>
                <a title="交换选项文字" href="javascript:">选项文字
                  <!--                <i class="bi bi-arrow-down-up"></i>-->
                  <!--                  <a-icon type="swap"  class="rotate-icon" />-->
              </a>
              </span>
            </td>
            <td align="center">图片</td>
            <td align="center">说明</td>
            <td align="center">允许填空</td>
            <td align="center">默认</td>
            <td align="left">上移下移</td>
          </tr>
          <tr class="con-col" v-for="item in toPicList" :key="item.id">
            <td class="input-icon">
              <input type="text" tabindex="1" title="回车添加新选项，上下键编辑前后选项" v-model.trim="item.topicTitle"
                     :placeholder="item.isFocus ? '' : item.placeholder "
                     @focus="handleFocus(item)"
                     @blur="handleBlur(item)">
              <span title="在此选项下面插入一个新的选项">
                <span class="bx">
                    <a-icon type="plus-circle" @click="addTopic(item.id)"/>
                </span>
                <!--                <i class='bx bx-plus-circle' @click="addTopic(item.id)"></i>-->
              </span>
              <span title="删除当前选项（最少保留2个选项）">
               <span class="bx">
                    <a-icon type="minus-circle" @click="removeTopic(item.id)"/>
                </span>
                <!--                <i class="bi bi-dash-circle" @click="removeTopic(item.id)"></i>-->
              </span>
            </td>
            <td align="center"><input type="hidden" value="">
              <input type="file" accept="image/*" @change="option_img_change($event, item)"
                     style="display:none;">
              <span title="添加图片" @click="option_add_img_click($event)">
                <span class="bx">
                  <a-icon v-if="item.img === null" type="picture"/>
                  <img v-else style="width: 24px; height: 24px" :src="item.img">
                </span>
                <!--                <i class='bx bx-image'></i>-->
              </span>
              <span style="display: none;">
                <input type="checkbox" tabindex="-1" title="是否显示选项文字">
              </span>
            </td>
            <td align="center">
              <span title="支持HTML，图片，视频等">
                 <span class="bx">
                    <a-icon type="profile" @click="isExplainChange(item)"
                            :class="item.explain !== '' ? 'have-explain' : ''"/>
                 </span>
                <!--                <i class='bx bxs-detail' @click="isExplainChange()"></i>-->
              </span>
              <input type="hidden" value="">
            </td>
            <td align="center">
              <span class="is-gap">
                <span class="span-gap1">
                  <input type="checkbox" tabindex="-1" v-model="item.isGap" @click="isGapChange(item)"
                         :id="'isGap' + item.id" class="custom-checkbox2">
                  <label title="允许填空" class="beautify-label"></label>
                </span>
                <span v-if="item.isGap" class="span-gap2">
                  <span></span>
                  <input type="checkbox" tabindex="-1" id="isGapRequired" v-model="item.isGapRequired"
                         class="custom-checkbox2">
                  <label title="填空内容必填" for="isGapRequired">必填</label>
                  <!--                  <input type="text" style="width: 10px; display: none;">
                                    <a href="javascript:" style="background: rgb(38, 38, 38); color: rgb(255, 255, 255); border-radius: 2px; margin-left: 4px;">
                                      <box-icon type='solid' name='sort-alt'></box-icon>
                                    </a>-->
                </span>
              </span>
            </td>
            <td align="left" style="display: none;">
              <span>
                <input type="text" maxlength="5" title="在此可以设置每个选项的分数（请输入整数）" style="width: 30px;">
              </span>
            </td>
            <td align="center">
                          <span>
                            <input type="checkbox" v-model="item.isDefault" tabindex="-1" @click="handleClick(item.id)"
                                   class="custom-checkbox2">
                          </span>
            </td>
            <td align="left" style="">
              <span title="将当前选项上移一个位置">
              <span class="bx bi" style="margin: 0 -0 0 -4px">
                <a-icon type="up-circle" @click="moveUp(item.id)"/>
                <!--                <box-icon name='down-arrow-circle' rotate='180' color='#a8a8a8' @click="moveUp(item.id)"></box-icon>-->
                </span>
                <!--                <i class="bi bi-arrow-up-circle" @click="moveUp(item.id)"></i>-->
              </span>
              <span title="将当前选项下移一个位置">
              <span class="bx bi" style="margin-left: 0">
                <a-icon type="down-circle" @click="moveDown(item.id)"/>
                <!--                <box-icon name='down-arrow-circle' color='#a8a8a8' @click="moveDown(item.id)"></box-icon>-->
              </span>
                <!--                <i class="bi bi-arrow-down-circle" @click="moveDown(item.id)"></i>-->
              </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--      批量设置区-->
      <!--      <div class="batch">
              <div class="spanLeft">
                 <span>
                    <a href="javascript:" style="margin-right:14px;" @click="addTopic(-1)">添加选项</a>
                    <a href="javascript:" style="margin-right:14px;">批量添加选项</a>
                  </span>
              </div>
              <div class="spanRight">
                &lt;!&ndash;          <div class="left">
                            <span>
                              <a-icon type="picture"/>
                              &lt;!&ndash;              <i class="bi bi-image"></i>&ndash;&gt;
                            </span>
                            <span>
                              <a-icon type="profile"/>
                              &lt;!&ndash;              <i class="bi bi-file-text"></i>&ndash;&gt;
                            </span>
                          </div>&ndash;&gt;
              </div>
            </div>-->
      <!--      逻辑设置区-->
      <div class="logic-setting">
        <span class="left">逻辑设置：</span>
        <span class="right">
          <span>
            <a href="javascript:" @click="topicCorrelation()">题目关联</a>
          </span>
          <span>
            <a href="javascript:" @click="skipLogic()">跳题逻辑</a>
          </span>
          <span>
            <a href="javascript:" @click="GroupingSetting()">分组设置</a>
          </span>
          <!--          <span>
                      <a href="javascript:">选项关联</a>
                    </span>
                    <span>
                      <a href="javascript:">隐藏题目</a>
                    </span>
                      <span>
                        <a href="javascript:">计算公式</a>
                      </span>-->
        </span>
      </div>
      <!--      完成编辑按钮-->
      <div class="overEdit">
        <input type="button" value="完成编辑" class="submitbutton" @click="submitButton"></div>
    </div>
    <!--    提示文本的富文本编辑区-->
    <div v-if="showModal" class="div-top">
      <div class="editor2">
        <VueEditor v-model.trim="topicHint" placeholder="提示信息"></VueEditor>
        <div class="resize-handle" @mousedown="onResizeStart">
          <a-icon class="bx" type="column-height"/>
        </div>
        <div class="btn-button">
          <button type="button" class="btn1" @click="showModalContentChange(false)">取消</button>
          <button type="button" class="btn2" @click="showModalContentChange(true)">保存</button>
        </div>
      </div>
    </div>
    <!--    添加单个说明的富文本编辑区-->
    <div v-if="isExplain" class="div-top">
      <!-- 用ref指定dom元素 -->
      <div class="editor2" id="cursor" ref="draggable"
           @mousedown="startDragging"
           @mouseup="stopDragging"
           @mouseleave="stopDragging"
           @mousemove="onMouseMove"
           :style="{ left: left + 'px', top: top + 'px' }"> <!-- 使用left和top样式来定位元素 -->
        <div class="head" style="cursor: move">
          <span>选项说明</span>
        </div>
        <form name="form" id="form1" style="cursor: auto">
          <div class="content">
            <!--          顶部内容来源选项-->
            <div style="margin-top: 6px" class="divChoices">
              <div class="left">
                <b style="vertical-align: middle;">内容来源：</b>
                <input type="radio" id="rblContent" name="isContentSource" :checked="isContentSource"
                       @click="isContentSourceChange(true)">
                <label for="rblContent">直接输入内容</label>
                <input type="radio" id="rblWebSite" name="isContentSource" :checked="!isContentSource"
                       @click="isContentSourceChange(false)">
                <label for="rblWebSite">外站内容页面</label>
                <a href="/help/help.aspx?helpid=428&amp;h=1">
                  <a-icon type="question-circle" theme="filled"/>
                </a>
              </div>
              <div class="right">
                <span v-if="isContentSource" id="inner_text" class="outIn_style">如果内容长度超过2000，建议使用“外站内容页面”方案</span>
                <span v-else id="outer_text" class="outIn_style">推荐在“石墨文档”等在线文档平台创建内容并插入链接</span>
              </div>
            </div>
            <!--          富文本编辑器-->
            <div class="cursor-editor" v-if="isContentSource">
              <VueEditor v-model.trim="explain"></VueEditor>
              <div class="resize-handle" @mousedown="onResizeStart">
                <a-icon class="bx" type="column-height"/>
                <!--                <i class="bi bi-arrows-expand"></i>-->
              </div>
            </div>
            <div v-else class="cursor-editor">
              <input placeholder="请输入网址https://" v-model.trim="explainUrl">
            </div>

            <div class="title-bottom">
              <div id="divSet">
                <b>显示方式：</b>
                <input type="radio" tabindex="-2" id="cbShowDirect" name="isDisplayMode" :checked="isDisplayMode"
                       @click="isDisplayModeChange(true)">
                <label for="cbShowDirect">直接显示在问卷页面</label>&nbsp;&nbsp;
                <input type="radio" tabindex="-1" id="cbPop" name="isDisplayMode" :checked="!isDisplayMode"
                       @click="isDisplayModeChange(false)">
                <label for="cbPop">点击按钮后在弹窗中显示</label>
                <input v-if="!isDisplayMode" class="display-input" type="text" placeholder="按钮默认文案为：了解详情"
                       v-model.trim="popUpWinExplainMsg">
              </div>
              <div class="display-usage">“显示方式”对此题所有选项均有效</div>
            </div>
          </div>
        </form>
        <!--        底部按钮-->
        <div class="btn-button" style="cursor: auto">
          <button type="button" class="btn1" @click="isExplain = false">取消</button>
          <button type="button" class="btn2" @click="saveExplain(explain, explainUrl, popUpWinExplainMsg)">保存</button>
        </div>
      </div>
    </div>
    <!-- 选择图片 -->
    <div>
      <a-modal v-model:visible="showSelectImg" centered title="图片" width="500px" @ok="(() => {
                return false;
            })">
        <input type="file" accept="image/*" ref="selectImgInput" style="display:none;"
               @change="topic_img_change($event)">
        <a @click="(() => { $refs.selectImgInput.click(); })">
          <div style="background-color: #F7F8F9;border: 1px solid #D7D8D9;border-radius: 5px;text-align: center;">
            <box-icon name='plus' color='#5f5d5d' size="100px" style="padding: 80px 0px;"></box-icon>
            <div style="color: #B7B7B7;">点击上传图片</div>
            <div style="padding: 10px 0px 50px;color: #B7B7B7;font-size: 12px;">不超过4M</div>
          </div>
        </a>
      </a-modal>
    </div>
  </div>
  <!--    批量添加说明-->
</template>

<script>
import { VueEditor } from 'vue2-editor'

export default {
  name: 'MultipleChoice',
  props: {
    toPic: {
      type: Number
    },
    value: Object
  },
  components: {
    VueEditor
  },
  data () {
    return {
      topicTitle: '',
      topicHint: '', // 提示富文本内容
      topicHintItem: '', // 临时提示富文本内容
      lastNoRandomNumber: '-1', // 选项最后几项不随机 ‘’：不随机 '0'：全部随机  '1'：最后一项不随机
      isShow: true, // 是否展开组件
      isRequired: false, // 展示所有题必答
      isTitleRequired: true, // 此题是否必答
      showModal: false, // 填写提示窗口
      isResizing: false, // 是否正在调整高度
      startResizeY: 0, // 开始调整高度时的鼠标纵坐标
      startHeight: 0, // 开始调整高度时的编辑器高度,
      nextId: 1,
      toPicItem: Object,
      mouseStyle: '', // 鼠标的状态图标
      explain: '', // 说明富文本内容
      explainUrl: '', // 单个说明外站Url内容
      isPopUpWin: false, // 单个说明是否弹窗显示
      topic: {
        id: this.nextId,
        isFocus: false, // 是否选中
        topicTitle: '', // 选项标题
        placeholder: '',
        img: null,
        explain: '', // 说明信息
        isGap: false, // 是否允许填空
        isGapRequired: false, // 允许填空后是否必填
        isDefault: false, // 是否默认
        isContentSource: true, // 单个说明弹窗内容来源
        isDisplayMode: true, // 单个说明弹窗显示方式
        explainUrl: '', // 单个说明 外站内容页面Url
        popUpWinExplainMsg: '' // 单个说明 弹窗显示内容
      },
      toPicList: [],
      isMouseout: true,
      showBatchMove1: false, // 显示批量删除
      showBatchMove2: false, // 显示批量移动
      showBatchMove3: false,
      isExplain: false, // 显示说明弹窗
      dragging: false, // 当前是否正在拖拽
      startLeft: 0, // 拖拽开始时div左边距离屏幕左侧的距离
      startTop: 0, // 拖拽开始时div上边距离屏幕顶部的距离
      left: 0, // div距离屏幕左侧的距离
      top: 0, // div距离屏幕顶部的距离
      isContentSource: true, // 单个说明弹窗内容来源
      isDisplayMode: true, // 单个说明弹窗显示方式
      mouseMoveStatus: '', // 鼠标移动时的状态图标
      popUpWinExplainMsg: '', // 单个说明 弹窗显示内容
      showSelectImg: false, // 显示选择图片弹出框
      tmpImgData: {// 临时存储选择图片数据
      }
    }
  },
  watch: {
    isShow () {
      console.log('isShow发生变化', this.isShow)
      // 只有收起编辑器时保存组件内容
      if (this.isShow) return
      this.submitButton()
    }
  },
  methods: {
    // 当收起编辑区时保存组件内容
    isShowWin () {
      this.isShow = !this.isShow
      // 只有收起编辑器时保存组件内容
      if (this.isShow) return
      this.submitButton()
    },
    // 必答和非必答按钮绑定
    toggleCheckbox (val) {
      const checkbox = document.getElementById('customControlInline')
      checkbox.checked = val === true
      this.isTitleRequired = val
    },
    // 问题提示编辑器 调整高度
    onResizeStart (event) {
      this.isResizing = true
      this.startResizeY = event.clientY
      this.startHeight = document.getElementsByClassName('ql-editor')[1].offsetHeight
      // this.startHeight = this.$refs.editorWrapper.offsetHeight
      window.addEventListener('mousemove', this.onResizeMove)
      window.addEventListener('mouseup', this.onResizeEnd)
    },
    // 问题提示编辑器 调整高度
    onResizeMove (event) {
      if (this.isResizing) {
        const delta = event.clientY - this.startResizeY
        const newHeight = this.startHeight + delta
        document.getElementsByClassName('ql-editor')[1].style.height = `${newHeight}px`
        // this.$refs.editorWrapper.style.height = `${newHeight}px`
      }
    },
    // 问题提示编辑器 调整高度
    onResizeEnd () {
      this.isResizing = false
      window.removeEventListener('mousemove', this.onResizeMove)
      window.removeEventListener('mouseup', this.onResizeEnd)
    },
    // 是否展示 提示编辑器
    showModalChange () {
      this.showModal = true
    },
    // 是否展示 添加说明编辑器  点击说明时获取对应选项的说明
    isExplainChange (item) {
      this.isExplain = true
      this.toPicItem = item
      // console.log(item)
      this.explain = item.explain
      // console.log(this.explain, 'this.explain')
      this.isContentSource = item.isContentSource
      this.isDisplayMode = item.isDisplayMode
      this.explainUrl = item.explainUrl
    },
    // 初始化数据
    initData () {
      if (this.toPicList.length === 0) {
        for (let i = 0; i < 3; i++) {
          this.topic = {
            id: this.nextId,
            topicTitle: '',
            placeholder: '选项 ' + this.nextId,
            isFocus: false,
            img: null,
            explain: '',
            isGap: false,
            isDefault: false,
            isGapRequired: false,
            isContentSource: true,
            isDisplayMode: true,
            explainUrl: '',
            popUpWinExplainMsg: ''
          }
          this.toPicList.push(this.topic)
          this.nextId++
        }
      }
    },
    // 传入id获取id对应的索引
    getIndex (id) {
      return this.toPicList.findIndex((item) => item.id === id)
    },
    // 传入两个索引值 交换toPicList中对应索引值的内容
    exchange (index, nextIndex) {
      const item = this.toPicList[index]
      this.toPicList.splice(index, 1, this.toPicList[nextIndex])
      this.toPicList.splice(nextIndex, 1, item)
    },
    // 往toPicList数组中添加数据
    pushTopic (index) {
      this.topic = {
        id: this.nextId,
        placeholder: '选项 ' + this.nextId,
        isFocus: false,
        topicTitle: '',
        img: null,
        explain: '',
        isGap: false,
        isDefault: false,
        isGapRequired: false,
        isContentSource: true,
        isDisplayMode: true,
        explainUrl: '',
        popUpWinExplainMsg: ''
      }
      this.toPicList.splice(index, 0, this.topic)
      this.nextId++
    },
    // 添加选项
    addTopic (id) {
      if (id === -1) {
        this.pushTopic(this.toPicList.length)
        return
      }
      const index = this.getIndex(id)
      this.pushTopic(index + 1)
      // console.log(index + 1, '添加')
    },
    // 删除选项
    removeTopic (id) {
      if (this.toPicList.length > 1) {
        const index = this.getIndex(id)
        this.toPicList.splice(index, 1)
        // console.log(index, '删除')
      }
      /*      const len = this.toPicList.length
            // 是否需要重置 随机选项
            if ((len - 2) < this.lastNoRandomNumber) {
              // console.log('需要重置 随机选项')
              this.lastNoRandomNumber = '-1'
            } */
    },
    // 上移
    moveUp (id) {
      const index = this.getIndex(id)
      if (index >= 1) {
        this.exchange(index, index - 1)
        // console.log('上移', index, index - 1)
      }
      // console.log('当前已经是第一位，无法继续上移')
    },
    // 下移
    moveDown (id) {
      const index = this.getIndex(id)
      if (index < this.toPicList.length - 1) {
        this.exchange(index, index + 1)
        // console.log('下移', index, index + 1)
      }
      // console.log('当前已经是最后一位，无法继续下移')
    },
    // 是否选中输入框
    handleFocus (item) {
      item.isFocus = true
    },
    // 是否离开输入框
    handleBlur (item) {
      item.isFocus = false
    },
    // 勾选了默认选项
    handleClick (id) {
      const index = this.getIndex(id)
      const item = this.toPicList[index]
      item.isDefault = !item.isDefault
      // 过滤出其他已经勾选的默认选项
      const newtoPicList = this.toPicList.filter(item => item.id !== id).filter(item => item.isDefault)
      if (newtoPicList.length > 0) {
        newtoPicList.forEach((item) => {
          const index = this.getIndex(item.id)
          item.isDefault = false
          this.toPicList.splice(index, 1, item)
        })
      }
      // console.log(this.toPicList)
    },
    // 鼠标进入题目区
    onmouseout () {
      this.isMouseout = true
      // console.log(this.isMouseout)
    },
    // 鼠标离开题目区
    onmouseover () {
      this.isMouseout = false
      // console.log('鼠标进入', this.isMouseout)
    },
    // 获取的状态图标
    onMouseMove (event) {
      const element = event.target
      const style = window.getComputedStyle(element)
      // 当前鼠标状态（如 pointer 或 move 等）
      this.mouseMoveStatus = style.getPropertyValue('cursor')
    },
    // 移动提示窗口
    startDragging (event) {
      // 当正在调整提示编辑器高度时 或者 鼠标的图标不是移动图标  禁止移动窗口
      if (this.isResizing || this.mouseMoveStatus !== 'move') return
      this.dragging = true // 设置拖拽状态为true
      this.startLeft = event.clientX - this.left // 记录拖拽开始时div左边距离屏幕左侧的距离
      this.startTop = event.clientY - this.top // 记录拖拽开始时div上边距离屏幕顶部的距离
      document.addEventListener('mousemove', this.drag) // 监听鼠标移动事件，执行drag方法
      // console.log('开始移动弹窗~~~')
    },
    // 移动提示窗口
    stopDragging () {
      this.dragging = false // 设置拖拽状态为false
      document.removeEventListener('mousemove', this.drag) // 移除鼠标移动事件的监听
      // console.log('停止移动弹窗~~~')
    },
    // 移动提示窗口
    drag (event) {
      if (this.dragging) { // 如果当前正在拖拽
        this.left = event.clientX - this.startLeft // 计算div距离屏幕左侧的距离
        this.top = event.clientY - this.startTop // 计算div距离屏幕顶部的距离
      }
    },
    // 切换内容来源（提示弹窗）
    isContentSourceChange (val) {
      console.log(val, '内容来源')
      this.isContentSource = val
    },
    // 切换显示方式（提示弹窗）
    isDisplayModeChange (val) {
      console.log(val, '显示方式')
      this.isDisplayMode = val
    },
    // 保存说明富文本中的内容
    saveExplain (explain, explainUrl, popUpWinExplainMsg) {
      console.log(explain, 'explain')
      console.log(explainUrl, 'explainUrl')
      const _this = this
      // 输入的不是网址 (置为空)
      if (explainUrl !== '' && explainUrl.match(/^https:/) === null) {
        this.$warning({
          title: '提示',
          content: ('提示：网址必须以https:开头，http页面无法直接显示！'),
          centered: true,
          // 回调函数
          onOk () {
            console.log('执行回调函数')
            _this.explainUrl = ''
          }
        })
      } else if (explain !== '' && explainUrl === '' && !this.isContentSource) {
        this.saveExplainExecute('', '', popUpWinExplainMsg)
      } else {
        this.saveExplainExecute(explain, explainUrl, popUpWinExplainMsg)
      }
    },
    // 保存说明富文本中的内容 -> 执行
    saveExplainExecute (explain, explainUrl, popUpWinExplainMsg) {
      this.isExplain = false
      const toPic = this.toPicList[this.getIndex(this.toPicItem.id)]
      const oldContent = toPic.explain.replaceAll('<p>', '').replaceAll('</p>', '')
      const newContent = explain.replaceAll('<p>', '').replaceAll('</p>', '')
      const isUrl = newContent.match(/^https:/) !== null
      if (isUrl) {
        console.log('是https:开头')
        toPic.isContentSource = false
      } else {
        console.log('不是https:开头')
        toPic.isContentSource = true
      }
      /* 一: 保存说明内容 */
      // 1. 有内容没有外站链接 (修改的是内容)
      if (explain !== '' && explainUrl === '' && explainUrl === toPic.explainUrl) {
        // 是否使用了富文本编辑器中的工具  // 没有使用
        if (oldContent.indexOf('<') === -1 || oldContent.lastIndexOf('>') === -1) {
          if (isUrl) {
            toPic.explainUrl = newContent
          }
          toPic.explain = explain
          // 使用了
        } else {
          toPic.explain = explain
          toPic.explainUrl = newContent
        }
        toPic.explain = explain
        // 2. 既有内容又有外站链接 (修改的是内容)
      } else if (explain !== '' && explainUrl !== '' && explainUrl === toPic.explainUrl) {
        const conent = explain.replaceAll('<p>', '').replaceAll('</p>', '')
        // 是否使用了富文本编辑器中的工具  // 没有使用
        if (conent.indexOf('<') === -1 || conent.lastIndexOf('>') === -1) {
          if (isUrl) {
            toPic.explainUrl = conent
          } else {
            toPic.explainUrl = ''
          }
          toPic.explain = explain
        } else {
          // 使用了
          toPic.explain = explain
          toPic.explainUrl = ''
        }
        // 3. 既有内容又有外站链接 （修改的是外站链接） 4. 有内容没有外站链接 (修改的是外站链接)
      } else if (explainUrl !== '' && explainUrl !== toPic.explainUrl || explain !== '' && explainUrl === '' && explainUrl !== toPic.explainUrl) {
        // 输入的不是网址 (置为空)
        if (explainUrl !== '' && explainUrl.match(/^https:/) === null) {
          this.$warning({
            title: '提示',
            content: ('提示：网址必须以https:开头，http页面无法直接显示！'),
            centered: true
            // 回调函数
          })
          this.explainUrl = ''
        } else {
          toPic.isContentSource = false
          toPic.explain = explainUrl
          toPic.explainUrl = explainUrl
          if (explainUrl === '' && explain !== '') {
            toPic.isContentSource = true
          }
        }
        // 5. 没有内容有外站链接 （修改的是内容） 6. 既没有内容又没有外站链接
      } else if (explain === '' && explainUrl !== '' && explain !== toPic.explain || explain === '' && explainUrl === '') {
        toPic.explain = explain
        toPic.explainUrl = explain
      }
      /* 二: 保存是否弹窗显示说明及内容 */
      toPic.isDisplayMode = this.isDisplayMode
      if (popUpWinExplainMsg !== toPic.popUpWinExplainMsg) {
        toPic.popUpWinExplainMsg = popUpWinExplainMsg
      }
      // 将修改好的内容重新赋值回去
      this.toPicList[this.getIndex(this.toPicItem.id)] = toPic
      console.log(this.toPicList, 'this.toPicList')
    },
    // 点击了允许填空
    isGapChange (item) {
      // 当已经勾选了允许填空并且 填空是必填时
      if (item.isGap && item.isGapRequired) {
        // 将必填设为false
        item.isGapRequired = false
      }
      item.isGap = !item.isGap
    },
    // 是否保存提示信息 (true 保存  false 取消)
    showModalContentChange (val) {
      if (!val && this.topicHint !== this.topicHintItem) {
        const _this = this
        this.$confirm({
          title: '提示',
          content: '您要取消刚才所做的更改吗？',
          okText: '确认',
          cancelText: '取消',
          centered: true,
          // 回调函数
          onOk () {
            console.log('点击确认按钮')
            _this.topicHint = _this.topicHintItem
            _this.showModal = false
          },
          onCancel () {
            // console.log('点击取消按钮')
          }
        })
        // this.showModal = false
      } else {
        // 当提示信息发生变化时 存入临时的提示信息中
        this.topicHintItem = this.topicHint
        this.showModal = false
      }
    },
    // 题目关联
    topicCorrelation () {
      console.log('执行题目关联')
    },
    // 跳题逻辑
    skipLogic () {
      console.log('执行跳题逻辑')
    },
    // 分组设置
    GroupingSetting () {
      console.log('执行分组设置')
    },
    // 保存组件内容
    submitButton () {
      console.log(this.toPic, '保存组件内容')
      this.value.title = this.topicTitle === '' ? '标题' : this.topicTitle
      const topic = {
        topicTitle: this.topicTitle,
        topicHint: this.topicHint,
        lastNoRandomNumber: this.lastNoRandomNumber,
        isRequired: this.isRequired,
        isTitleRequired: this.isTitleRequired,
        toPicList: this.toPicList
      }
      this.value.topic = topic
      console.log(this.value, 'this.value')
    },
    add_topic () { // 添加题目
      console.log('添加题目')
    },
    copy_click () { // 组件复制
      console.log('组件复制')
    },
    delete_click () { // 组件删除
      console.log('组件删除')
    },
    batch_delete_click () { // 组件批量删除
      console.log('组件批量删除')
    },
    move_up_click () { // 向上移动
      console.log('向上移动')
    },
    batch_move_up_click () { // 批量向上移动
      console.log('批量向上移动')
    },
    down_click () { // 向下移动
      console.log('向下移动')
    },
    batch_down_click () { // 批量向下移动
      console.log('批量向下移动')
    },
    first_click () { // 最前
      console.log('最前')
    },
    last_click () { // 最后
      console.log('最后')
    },
    // 上传图片
    option_add_img_click (e) { // 添加文件
      // 触发上一个兄弟元素点击事件(input[type=file])
      this.showSelectImg = true
      e.currentTarget.previousSibling.click()
    },
    option_img_change (e, item) { // 选项文件
      item.img = item.toPicImg
      console.log('上传选项:', item.toPicImg)
      // 执行上传逻辑,将图片文件转化成base64格式图片
      const reader = new FileReader()
      reader.onload = (e) => {
        // e.target.result就是从本地读取的图片的base64格式
        item.toPicImg = e.target.result
      }
      reader.readAsDataURL(e.target.files[0])
    },
    imgLoad (e) { // 图片比例计算
      e.target.style.width = '10px'
    },
    customImgSelect (e) { // 自定义图片选择
      this.showSelectImg = true
      console.log(e)
    },
    topic_img_change (e) { // 题目文件
      // 将图片文件转化成base64格式图片
      const reader = new FileReader()
      reader.onload = (e) => {
        // e.target.result就是从本地读取的图片的base64格式
        // item.toPicImg = e.target.result;
        console.log(e)
      }
      reader.readAsDataURL(e.target.files[0])
    },
    allImgAddEventListener () { // 所有图片上传设置点击事件
      this.$nextTick(() => {
        const image = document.getElementsByClassName('ql-image')
        for (let i = 0; i < image.length; i++) {
          image[i].removeEventListener('click', (e) => {
            this.customImgSelect(e)
            e.stopImmediatePropagation()
          })
          image[i].addEventListener('click', (e) => {
            this.customImgSelect(e)
            e.stopImmediatePropagation()
          }, true)
        }
      })
    }

  },
  created () {
    // 初始化数据
    this.$nextTick(() => {
      this.initData()
    })
  },
  mounted () {
    // 所有图片上传设置点击事件
    const topic = this.value.topic
    this.allImgAddEventListener()
    if ((typeof this.value.id === 'number') && topic.topic_type === 'MultipleChoice') {
      console.log(this.value.name === 'MultipleChoice', '================单选=================')
      console.log(this.toPic, this.value, 'this.value', '=================单选================')
      this.topicTitle = topic.topic_title === null ? '' : topic.topic_title
      this.topicHint = topic.topic_hint === null ? '' : topic.topic_hint
      this.lastNoRandomNumber = topic.lastNoRandomNumber === undefined ? '-1' : topic.lastNoRandomNumber
      this.isRequired = topic.is_required === false ? false : topic.is_required
      this.isTitleRequired = topic.isTitleRequired === false ? topic.isTitleRequired : true

      topic.toPicList.forEach((item) => {
        const toPic = {
          id: item.id === '' ? this.nextId : item.id,
          topicTitle: item.topicTitle === '' ? '' : item.topicTitle,
          placeholder: item.placeholder === '' ? '选项 ' + this.nextId : item.placeholder,
          isFocus: item.isFocus === true ? item.isFocus : false,
          img: item.img === null ? null : item.img,
          explain: item.explain === '' ? '' : item.explain,
          isGap: item.isGap === true ? item.isGap : false,
          isDefault: item.isDefault === true ? item.isDefault : false,
          isGapRequired: item.isGapRequired === true ? item.isGapRequired : false,
          isContentSource: item.isContentSource === false ? item.isContentSource : true,
          isDisplayMode: item.isDisplayMode === false ? item.isDisplayMode : true,
          explainUrl: item.explainUrl === '' ? '' : item.explainUrl,
          popUpWinExplainMsg: item.popUpWinExplainMsg === '' ? '' : item.popUpWinExplainMsg
        }
        this.toPicList.push(toPic)
        this.nextId++
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mc-container {

  // 题目展示区
  .title {
    padding: 30px 50px 46px 50px;
    border-bottom: 1px solid #e0e0e0;

    .content {
      display: flex;
      font-weight: bold;
      font-size: 16px;
      justify-content: left;

      .title-con {
        display: flex;
        justify-content: left;
        margin-bottom: -10px;

        span {
          margin-right: 16px;
        }
      }

    }

    .hint {
      /deep/ p {
        margin-bottom: 0;
      }
    }

    .form-check {
      line-height: 34px;
      color: #333333;

      .left-title {
        font-size: 15px;
        display: flex;
        justify-content: left;
        align-items: center;

        .form-check-input {
          width: 15px; /* 设置宽度 */
          height: 15px; /* 设置高度 */
          margin-right: 3px;
          margin-bottom: -0.5px;
          pointer-events: none;
        }

        /deep/ .gap {
          font-size: 15px;
          vertical-align: top;
          top: -3px;
          margin-left: 3px;
          height: 26px;
          padding: 2px 3px 0 3px;
          border: none;
          border-bottom: solid 1px #cdcdcd;
          background-color: transparent;
        }

        /deep/ .gap:hover {
          cursor: text;
          border: solid 1px #8c8c8c;
        }
      }

      .form-check-a {
        color: gray;
        margin-left: 20px;
        text-decoration: underline;
      }

      .form-check-a:hover {
        color: #1ea0fa;
      }

      #explain-p{
        color: #999999;
        margin-bottom: 0;
        margin-left: 20px;
        /deep/ p {
          margin-bottom: 0;
        }
      }

      .div-top2 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.642);
        z-index: 999;
        // 单个说明弹窗显示
        #pop-up-w-explain {
          position: fixed;
          padding: 0;
          width: 530px;
          height: 560px;
          top: 50%;
          left: 50%;
          transform: translate(150%, 30%);
          background-color: white;
          border-radius: 2px;
          box-shadow: 5px 4px 30px rgba(0, 0, 0, 0.2);

          .header {
            width: 100%;
            height: 30px;
          }

          .fixed-con {
            overflow: auto;

            .content {
              padding: 10px;
              height: 500px;
            }

            .span-icon {
              position: fixed;
              top: 0;
              right: 10px;
              width: 18px;
            }
          }
        }
      }
    }

    .activity {
      display: flex;
      text-align: left;
      margin: 12px 0 -38px 0;
      justify-content: space-between;

      .left {
        width: 330px;

        a {
          color: #0095ff;
        }
      }

      .right {
        ul {
          display: flex;
          text-align: right;

          li {
            list-style: none;

            a {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
              width: 64px;
              color: #808080;
              height: 26px;
              border-radius: 2px;
              border: solid 1px #a9a9a9;
              margin-right: 8px;

              .bx {
                color: #474747;
                margin: 2px 3px 0 0;
                font-size: 14px;
              }
            }

            a:hover {
              color: #0095ff;
              border: solid 1px #0095ff;
            }
          }

          li:nth-child(3) {
            a:hover {
              color: red;
              border: solid 1px red;
            }
          }
        }
      }
    }
  }

  .title-mouse {
    background-color: #fafafa;
  }

  // 富文本编辑区
  .edit {
    border: 1px solid #D9E0E6;
    border-top: none;
    padding: 20px;
    position: relative;
    border-radius: 3px;
    //width: 400px;
    background-color: #fafafa;
    // 富文本编辑器
    .con {
      background-color: white;
      // 工具栏的背景颜色
      /deep/ .quillWrapper .ql-snow.ql-toolbar {
        background-color: #f0f0ee;
        padding: 3px 8px 0 8px;
      }

      /deep/ .ql-editor {
        font-size: 14px;
        font-family: inherit;
      }

      ::placeholder {
        color: gray !important;
      }

      // 编辑内容区的高度
      /deep/ .ql-editor {
        min-height: 54px;
        max-height: 100px;
        overflow: auto;
        padding: 5px 3px;
      }
    }

    //  换富文本组件 是否必答 提示
    .change-module {
      display: flex;
      margin: 10px 0;
      justify-content: left;
      align-items: center;
      line-height: 24px;

      .left {
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 4px;

        .custom-select {
          width: 120px;
          height: 24px;
          padding-top: 2px;
          margin-right: 20px;
        }

        a {
          color: #1ea0fa;
        }

        .explain {
          a {
            color: gray;
            text-decoration: underline;
          }

          a:hover {
            color: #1ea0fa;
          }
        }

        .custom-control {
          display: flex;
          align-items: center;
          margin-right: 20px;
          color: #6a6a6a;

          input {
            margin-right: 4px;
            line-height: 26px;
            margin-bottom: 3px;
          }

          label {
            margin-right: 8px;
          }

          span {
            a:nth-child(1) {
              margin: 0 4px 0 8px;
            }
          }

          a {
            text-decoration: underline;
          }
        }
      }

      .right {
        margin-left: 20px;
        color: #333333;
        margin-top: -2px;

        .random-select {
          width: 110px;
          height: 26px;
          margin-right: 2px;
          font-size: 12px;
          padding: 0 6px;
          border: solid 1px #a9a9a9;

          .hide {
            display: none;
          }
        }
      }

    }

    // 编辑题目区
    .topic-list {
      .table {
        color: #222222;

        tr:nth-child(1) {
          background-color: #e8e8e8;

          td:nth-child(1) {
            padding: 6px 5px 0 3px;
            width: 360px;
            height: 32px;
            line-height: 32px;

            span {
              a {
                color: rgb(34, 34, 34);
                margin-left: 7px;
                text-decoration: none;
              }
            }

            .bi {
              margin-left: 5px;
              color: #0095ff;
            }

            .rotate-icon {
              margin-left: 2px;
              transform: rotate(90deg);
              color: #0075ff;
            }

          }

          td:nth-child(2) {
            padding-top: 5px;
            width: 100px;
          }

          td:nth-child(3) {
            padding-top: 5px;
            width: 100px;
          }

          td:nth-child(4) {
            padding-top: 5px;
            width: 100px;
          }

          td:nth-child(5) {
            padding-top: 5px;
            width: 90px;
          }

          td:nth-child(6) {
            padding-top: 5px;
            width: 230px;
            padding-left: 10px;
          }
        }

        tr:nth-child(2) {
          td:nth-child(1) {
            padding-top: 8px;
          }
        }

        .con-col {
          .input-icon {
            display: flex;
            justify-content: left;
            align-items: center;

            span {
              margin-top: 0;
            }
          }

          input {
            width: 16px;
            height: 16px;
            margin: 3.5px 3px 3.5px 0;
            padding: 2px 6px;
            border: solid 3px #a8a8a8;
          }

          .bi {
            margin-left: -10px;
          }

          .bx {
            font-size: 24px;
            color: #a8a8a8;
            cursor: pointer;
            margin: 0 3px;

            .have-explain {
              color: #1ea0fa;
            }
          }

          a-icon {
            font-size: 18px;
            cursor: pointer;
            margin: 0 3px;
            color: #a8a8a8;
          }

          td:nth-child(1) {
            padding: 2px 0;
            width: 360px;

            input {
              width: 300px;
              height: 30px;
              border: solid 1px #cdcdcd;
            }
          }

          td:nth-child(4) {
            padding-top: 5px;
            width: 130px;
          }

          td:nth-child(7) {
            span {
              margin-left: 5px;
            }

            span:nth-child(1) {
              margin-left: 18px;
            }
          }

          i:hover {
            color: #0095ff;
          }

          .is-gap {
            display: flex;
            justify-content: center;
            align-content: center;

            .span-gap1 {
              //display: flex;
              //align-content: center;
            }

            .span-gap2 {
              display: flex;
              align-content: center;
              margin-top: 3px;

              span {
                width: 1px;
                height: 13px;
                margin: 4px 3px 0 0;
                border: solid 1px #d9d9d9;
              }

              input {
                margin-top: 1px;
              }
            }
          }
        }
      }
    }
  }

  // 视觉效果 向上小箭头
  .edit::after {
    display: block;
    content: "◆";
    position: absolute;
    font-size: 32px;
    left: 105px;
    top: -23px;
    color: white;
    z-index: 1;
  }

  /*注意：此处::before的content要比::after的bottom高1px，就形成了箭头视觉效果了*/

  .edit::before {
    display: block;
    content: "◆";
    position: absolute;
    font-size: 32px;
    left: 105px;
    top: -25px;
    color: #D9E0E6;
  }

  // 批量设置区
  .batch {
    display: flex;
    left: 0;
    margin: 12px 0 5px;
    line-height: 28px;
    height: 28px;
    // 批量设置
    .spanLeft {
      //display: block;
      width: 322px;
      margin: 0px 0px 0px 4px;
      text-align: left;

      a {
        color: grey;
      }

      a:hover {
        color: #0095ff;
      }
    }

    .spanRight {
      display: flex;
      // 图片及说明
      .left {
        font-size: 18px;
        color: #a8a8a8;

        span:nth-child(1) {
          margin-left: 15px;
        }

        span:nth-child(2) {
          margin: 0 10px 0 34px;
        }

        i:hover {
          color: #0095ff;
        }
      }

      // 下拉菜单
      .right {
        color: #333333;

        .random-select {
          width: 98px;
          height: 26px;
          margin-right: 2px;
          font-size: 12px;
          padding: 0 6px;
          border: solid 1px #a9a9a9;
        }

        /*     .mode {
               display: inline-block;

               select {
                 width: 84px;
                 margin-left: 8px;
               }
             }*/
      }
    }
  }

  // 逻辑设置
  .logic-setting {
    display: flex;
    padding: 0;
    margin: 15px 0 24px 0;
    color: #666666;
    text-align: left;
    min-height: 40px;
    line-height: 40px;
    background-color: #f4f4f4;
    border: 1px dashed #dbdbdb;

    .left {
      font-weight: 600;
      margin: 0 12px 0 10px;
      color: #6a6a6a;
    }

    .right {
      a {
        margin: 0 10px;
        color: #666666;
      }

      a:hover {
        color: #0095ff;
      }
    }
  }

  // 完成编辑按钮
  .overEdit {
    margin: 14px 0 20px 0;

    div {
      color: red;
      font-size: 14px;
      display: inline-block;
      margin: 0px 0px 6px 10px;
    }

    .submitbutton {
      width: 100%;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      border: 0;
      cursor: pointer;
      background-color: #ffab1a;
      font-size: 16px;
      color: #fff;
      border-radius: 4px;
      padding: 0 15px;
      overflow: visible;
    }
  }

  // 提示文本的富文本编辑区
  // 单个说明的富文本编辑区
  .div-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.642);
    z-index: 999;
    // 单个说明
    #cursor {
      padding: 0;
      height: 480px;
      cursor: move;
      top: 50%;
      left: 50%;
      transform: translate(90%, 50%);
      // 顶部选项说明
      .head {
        padding: 14px 60px 14px 20px;

        span {
          font-size: 18px;
        }
      }

      // 内容区 包含富文本编辑器
      .content {
        // 内容来源选项
        .divChoices {
          display: flex;
          justify-content: space-between;
          min-height: 36px;
          padding: 6px 10px 10px 30px;
          margin-top: 6px;

          b input label {
            height: 16px;
            line-height: 16px;
          }

          .left {
            display: flex;
            left: 0;
            align-items: center;

            input {
              margin-right: 4px;
            }

            a {
              margin-bottom: 0;
              color: #8C8C8C;
            }

            label {
              margin-right: 8px;
            }
          }

          .right {
            display: flex;
            right: 0;
            font-size: 12px;
            line-height: 28px;
            color: #A6A6A6;
            margin: 2px 20px 0 0;
            float: right;
          }
        }

        // 富文本的高
        .cursor-editor {
          padding: 0 30px;

          input {
            padding-left: 10px;
            width: 508px;
            height: 28px;
            line-height: 28px;
            background-color: #ffffff;
            border: solid 0.2px #abafb2;
          }

          /deep/ .ql-editor {
            max-height: 200px;
            overflow: auto;
          }
        }

        .title-bottom {
          padding: 6px 10px 0 30px;
          margin: 10px 0 10px 0;
          color: #333333;

          #divSet {
            display: flex;
            justify-content: left;
            align-content: center;

            input {
              margin: 2px 3px 0 0;
            }

            label {
              margin-right: 8px;
            }

            .display-input {
              width: 191px;
              height: 28px;
              line-height: 28px;
              border: 0.2px solid #abafb2;
              padding-left: 5px;
              margin: -3px 0 0 14px;
              //display: none
            }
          }

          .display-usage {
            margin-top: 6px;
            color: #8C8C8C;
            font-size: 12px;
          }
        }
      }

      // 底部按钮
      .btn-button {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 52px;
        padding-right: 3px;
        padding-top: 9px;
        justify-content: right;
        align-content: center;
        border-top: solid 1px #f0f0f0;

        .btn1 .btn2 {
          height: 34px;
        }
      }
    }

    // 提示文本
    .editor2 {
      //user-select: none; // 禁止选中拖拽区域内的文字
      position: fixed;
      z-index: 1000;
      width: 770px;
      height: 430px;
      background-color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-45%, -45%);
      padding: 30px 20px 34px 20px;
      //padding-top: 30px;
      border-radius: 2px;
      box-shadow: 5px 4px 30px rgba(0, 0, 0, 0.2);
      // 工具栏的背景颜色
      /deep/ .quillWrapper .ql-snow.ql-toolbar {
        background-color: #f0f0ee;
        padding: 3px 8px 0 8px;
      }

      // 工具栏中图标的大小
      /deep/ .ql-snow .ql-toolbar button svg, /deep/ .quillWrapper .ql-snow.ql-toolbar button svg {
        width: 16px;
        height: 16px;
      }

      /deep/ .quillWrapper .ql-snow.ql-toolbar .ql-formats {
        margin-bottom: 4px;
      }

      /deep/ .ql-toolbar.ql-snow .ql-formats {
        margin-right: 3px;
      }

      /deep/ .ql-snow .ql-picker-label {
        height: 100%;
        padding-left: 2px;
        padding-right: -20px;
        position: relative;
        width: 100%;
      }

      /deep/ .ql-editor {
        font-size: 12px;
        font-family: inherit;
      }

      /deep/ .ql-snow .ql-picker.ql-header {
        width: 76px;
      }

      ::placeholder {
        color: gray !important;
      }

      // 编辑内容区的高度
      /deep/ .ql-editor {
        max-height: 238px;
        min-height: 100px;
        height: 200px;
        padding: 5px 3px;
        overflow: auto;
      }

      /deep/ .quillWrapper {

      }

      // 底部确认和取消按钮
      .btn-button {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-top: 16px;

        button {
          width: 66px;
          height: 34px;
          border-radius: 2px;
          border: none;
        }

        .btn1 {
          border: 1px solid #f0f0ee;
          background-color: #ffffff;
          margin-right: 16px;
        }

        .btn1:hover {
          color: #1ea0fa;
        }

        .btn2 {
          background-color: #1ea0fa;
          color: white;
        }
      }

      .resize-handle {
        position: relative;
        height: 12px;
        background-color: #e2e2e2;
        cursor: ns-resize;
        text-align: center;

        .bx {
          position: absolute;
          left: 49%;
          font-size: 12px;
        }
      }
    }

  }

  // 当选中输入框后不改变输入框的边框颜色
  input:focus {
    outline: none; /* 去除input输入框被选中时的默认外边框 */
  }

  // 当选中下拉框后不改变输入框的边框颜色
  select:focus {
    outline: none; /* 去除input输入框被选中时的默认外边框 */
  }

  .custom-checkbox2[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
    position: relative;
  }

  .custom-checkbox2[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 2px solid #bfbfbf;
  }

  .custom-checkbox2[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #0095ff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 solid #0095ff;
    color: white;
    font-size: 13px;
    font-weight: 800;
  }

  .custom-checkbox3[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
    position: relative;
  }

  .custom-checkbox3[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 2px solid #bfbfbf;
  }

  .custom-checkbox3[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #0095ff;
    position: absolute;
    line-height: 16px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    border: 0 solid #0095ff;
    font-size: 13px;
    font-weight: 800;
  }

  .custom-radio[type="radio"] {
    width: 17px !important;
    height: 17px !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
    position: relative;
  }

  .custom-radio[type="radio"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50% !important;
    border: 2px solid #bfbfbf;
  }

  .custom-radio[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; /* 设置圆形的宽度和高度 */
    height: 4px; /* 设置圆形的宽度和高度 */
    border-radius: 50%; /* 设置圆形的边框半径 */
    border: none;
    background-color: #0095ff;
  }
}
</style>
